<template>
  <div class="home">
    <div class="message">
      <div class="message-bd">
        <input type="text" v-model="title" class="message-input" />
        <textarea name="message" id="message" v-model="message" class="message-textarea"></textarea>
        <div>
          <input type="file" @change="setCover" class="message-file" />
        </div>
        <button class="message-btn" @click="sendMessage">{{sendText}}</button>
      </div>
      <div class="message-list">
        <div class="message-item" v-for="(item,index) in messages" :key="'m_'+index">
          <div class="message-item__cover">
            <img :src="item.cover" alt />
          </div>
          <div class="message-item__bd">
            <div class="message-item__title">
              {{item.title}}
              <span class="message-time">{{item.time}}</span>
            </div>
            <div class="message-item__content">{{item.content}}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Chance from "chance";

var chance = new Chance();

export default {
  name: "Home",
  components: {},
  data() {
    return {
      title: '',
      message: '',
      sendText: "提交",
      cover: null,
      messages: []
    };
  },
  mounted() {
    this.updateMessage();
    this.getMessages();
  },
  methods: {
    setCover(e) {
      this.cover = e.currentTarget.files[0];
    },
    updateMessage() {
      this.title = chance.email();
      this.message = chance.paragraph();
    },
    sendMessage() {
      var _this = this;

      if (this.lock) {
        return;
      }

      _this.sendText = "提交中..";
      this.lock = true;
      var formData = new FormData();

      formData.append("title", this.title);
      formData.append("content", this.message);
      formData.append("avatar", this.cover);

      fetch(process.env.BASE_URL + "/demo", {
        method: "POST",
        body: formData
      })
        .then(response => {
          response.json();
          _this.lock = false;
          _this.sendText = "提交";
          _this.updateMessage();
          _this.getMessages();
        })
        .catch(error => console.error("Error:", error))
        .then(response => console.log("Success:", response));
    },
    // 获取最新数据
    getMessages() {
      var _this = this;

      var formData = new FormData();

      fetch(process.env.BASE_URL + "/demo2", {
        method: "POST",
        body: formData
      })
        .then(response => {
          _this.messages = response.json();
        })
        .catch(error => console.error("Error:", error))
        .then(response => console.log("Success:", response));
    }
  }
};
</script>
<style>
.message {
  margin: 0 auto;
  width: 600px;
}
.message-input {
  margin-bottom: 10px;
  width: 100%;
  height: 30px;
  padding: 0 10px;
  border: 1px solid #d8d8d8;
  border-radius: 4px;
}
.message-textarea {
  margin-bottom: 10px;
  width: 100%;
  height: 300px;
  padding: 10px;
  font-size: 14px;
  border: 1px solid #d8d8d8;
  border-radius: 4px;
  resize: none;
}
.message-file {
  margin-bottom: 10px;
}
.message-btn {
  padding: 6px 15px;
  background: #42b983;
  color: #fff;
  border: none;
  outline: none;
  font-size: 18px;
  border-radius: 6px;
}
.message-list {
  padding: 30px 0 60px;
}
.message-item {
  position: relative;
  display: flex;
  padding-bottom: 10px;
  border-bottom: 1px solid #d8d8d8;
}

.message-item:last-child {
  border-bottom: none;
}

.message-item__cover {
  width: 60px;
  height: 60px;
  margin-right: 15px;
}

.message-item__cover > img {
  max-width: 100%;
}
.message-item__bd {
  flex: 1;
}

.message-item__title {
  margin-bottom: 10px;
  font-size: 16px;
}
.message-time {
  font-size: 12px;
  color: #666;
}
.message-item__content {
  line-height: 1.5;
}
</style>